import { Button, Drawer, theme } from 'antd';
import { CloseOutlined, DeleteOutlined, DownloadOutlined, ReloadOutlined, SnippetsOutlined } from '@ant-design/icons'
import { forwardRef, useImperativeHandle, useState } from 'react';
import { FileItem } from '../../../utils/types';
import { formatTime, getFileSize, getFileType, getFileTypeName } from '../../../utils';
import { FolderConversion } from '@icon-park/react';

interface Props {
    onReNameFile: Function
    onPreViewFile: Function
    onDownLoadFile: Function
    onChangeParentFolder: Function
    onDeleteFile: Function
}


const FileInfoDrawer = (props: Props, ref: any) => {
    useImperativeHandle(ref, () => ({
        openDrawer,
        closeDrawer: onClose
    }))

    const {
        onReNameFile,
        onPreViewFile,
        onDownLoadFile,
        onChangeParentFolder,
        onDeleteFile,
    } = props;

    const [isDrawerOpen, setIsDrawerOpen] = useState(false);

    const [currentFocusFileItem, setCurrentFocusFileItem] = useState<FileItem>(null);

    const openDrawer = (fileItem) => {
        setIsDrawerOpen(true);
        setCurrentFocusFileItem(fileItem)
    }

    const onClose = () => {
        setIsDrawerOpen(false)
    }

    const adpatFileIcon = () => {
        const item = currentFocusFileItem;
        if (item.type == 1) {
            return (
                <img className='folder-icon-img-small' src={require("./../../../assets/image/folder.png")} alt="" />
            )
        } else {
            const fileType = getFileType(item.path);
            switch (fileType.toLowerCase()) {
                case '.png':
                case '.jpg':
                case '.jpeg':
                    return (
                        <img
                            className='file-icon-img-small'
                            src={item && item.url}
                        />
                    )
                    break;
                case '.doc':
                case '.docx':
                    return (
                        <img className='file-icon-img-small' src={require("./../../../assets/image/word.png")} alt="" />
                    )
                    break;
                case '.xlx':
                case '.xlsx':
                    return (
                        <img className='file-icon-img-small' src={require("./../../../assets/image/XLS.png")} alt="" />
                    )
                    break;
                case '.ppt':
                case '.pptx':
                    return (
                        <img className='file-icon-img-small' src={require("./../../../assets/image/PPT.png")} alt="" />
                    )
                    break;
                case '.zip':
                case '.rar':
                    return (
                        <img className='file-icon-img-small' src={require("./../../../assets/image/zip.png")} alt="" />
                    )
                    break;
                case '.pdf':
                    return (
                        <img className='file-icon-img-small' src={require("./../../../assets/image/PDF.png")} alt="" />
                    )
                    break;
                default:
                    break;
            }
        }
    }

    const handleReNameFile = () => {
        onReNameFile && onReNameFile(currentFocusFileItem)
    }

    const handlePreViewFile = () => {
        onPreViewFile && onPreViewFile(currentFocusFileItem)
    }

    const handleDownLoadFile = () => {
        onDownLoadFile && onDownLoadFile(currentFocusFileItem)
    }

    const handleDeleteFile = () => {
        onDeleteFile && onDeleteFile(currentFocusFileItem)
    }

    const handleChangeParentFolder = () => {
        onChangeParentFolder && onChangeParentFolder(currentFocusFileItem);
    }


    return (
        <Drawer
            title={"文件详情面板"}
            placement="right"
            closable={false}
            onClose={onClose}
            open={isDrawerOpen}
            width={399}
            getContainer={false}
            mask={false}
            className={'file-info-drawer'}
            extra={(
                <Button
                    icon={<CloseOutlined />}
                    type={'text'}
                    size={'small'}
                    onClick={onClose}
                />
            )}
        >
            {
                currentFocusFileItem &&
                <div
                    className='flex-col file-info-drawer-content'
                >
                    <div className='flex-col file-info-drawer-content-top'>
                        <div className='flex-row file-info-header'>
                            <div className='flex-row file-info-header-icon-container'>
                                {adpatFileIcon()}
                            </div>
                            <p className='file-info-name'>{currentFocusFileItem.name}</p>
                        </div>
                        <div className='flex-row file-info-row'>
                            <div className='file-info-row-title'>文件种类：</div>
                            <div className='file-info-row-value'>{getFileTypeName(currentFocusFileItem)}</div>
                        </div>
                        <div className='flex-row file-info-row'>
                            <div className='file-info-row-title'>文件大小：</div>
                            <div className='file-info-row-value'>{getFileSize(currentFocusFileItem)}</div>
                        </div>
                        <div className='flex-row file-info-row'>
                            <div className='file-info-row-title'>文件地址：</div>
                            <div className='file-info-row-value'>{currentFocusFileItem.type == 1 ? '--' : currentFocusFileItem.url}</div>
                        </div>
                        <div className='flex-row file-info-row'>
                            <div className='file-info-row-title'>创建时间：</div>
                            <div className='file-info-row-value'>{formatTime(currentFocusFileItem.createDate)}</div>
                        </div>
                        <div className='flex-row file-info-row'>
                            <div className='file-info-row-title'>修改时间：</div>
                            <div className='file-info-row-value'>{formatTime(currentFocusFileItem.updateDate)}</div>
                        </div>
                        <div className='flex-row file-info-row'>
                            <div className='file-info-row-title'>创建用户：</div>
                            <div className='file-info-row-value'>{currentFocusFileItem.createUserName ? currentFocusFileItem.createUserName : '--'}</div>
                        </div>
                        <div className='flex-row file-info-row'>
                            <div className='file-info-row-title'>修改用户：</div>
                            <div className='file-info-row-value'>{currentFocusFileItem.updateUserName ? currentFocusFileItem.updateUserName : '--'}</div>
                        </div>
                        <div className='flex-row file-info-row'>
                            <div className='file-info-row-title'>共享与权限：</div>
                            <div className='file-info-row-value'>全体成员</div>
                        </div>
                        {/* <div className='flex-row file-info-row'>
                            <div className='file-info-row-title'>下载记录：</div>
                            <div className='file-info-row-value'>全体成员</div>
                        </div> */}
                    </div>
                    <div
                        className='flex-row file-info-drawer-content-footer'
                    >
                        <Button
                            icon={<ReloadOutlined />}
                            style={{ marginRight: 10 }}
                            onClick={handleReNameFile}
                        >
                            重命名
                        </Button>
                        <Button
                            icon={(
                                <div style={{ display: 'inline-block', }}>
                                    <div style={{ marginBottom: -15 }}>
                                        <FolderConversion
                                            theme="outline"
                                            size="16"
                                            fill="#333"
                                        />
                                    </div>
                                </div>
                            )}
                            style={{ marginRight: 10 }}
                            onClick={handleChangeParentFolder}
                        >
                            移动
                        </Button>
                        {
                            currentFocusFileItem && currentFocusFileItem.type == 2 ?
                                <>
                                    {/* <Button
                                        icon={<SnippetsOutlined />}
                                        style={{ marginRight: 10 }}
                                        onClick={handlePreViewFile}
                                    >
                                        预览
                                    </Button> */}
                                    <Button
                                        icon={<DownloadOutlined />}
                                        style={{ marginRight: 10 }}
                                        onClick={handleDownLoadFile}
                                    >
                                        下载
                                    </Button>
                                </>
                                :
                                null
                        }
                        <Button
                            icon={<DeleteOutlined />}
                            onClick={handleDeleteFile}
                            danger
                        >
                            删除
                        </Button>
                    </div>
                </div>
            }

        </Drawer>
    )
}


export default forwardRef(FileInfoDrawer);